import { ReactiveProperty } from './../../../../scripts/libs/rxjs/cc3/ReactiveProperty';
import { _decorator, Component, Node, Label, Button } from 'cc';
import { BaseView } from '../../../../scripts/libs/rxjs/cc3/BaseView';
import { instantiate } from 'cc';
import { Sprite } from 'cc';
import { Color } from 'cc';
import { Colors, dirArrowTxt } from '../../game/basic';
import { BindButton } from '../../../../scripts/libs/rxjs/cc3/BindButton';
import { EditorStageView } from './EditorStageView';
import { nc } from '../../../../scripts/libs/rxjs/NotificationCenter';
import { EditorArrow } from './EditorArrow';
const { ccclass, property } = _decorator;

@ccclass('EditorArrowExplorerItem')
export class EditorArrowExplorerItem extends BaseView {

    editorStageView: EditorStageView = null;

    editorArrow = ReactiveProperty.Create<EditorArrow>(null);

    @property(Label)
    arrowIdLabel: Label = null;

    @property(Label)
    directionLabel: Label = null;

    @property(Label)
    layerLabel: Label = null;

    @property(Label)
    colorLabel: Label = null;

    @property(Sprite)
    colorSprite: Sprite = null;

    @property(Label)
    prevLabel: Label = null;

    @property(Button)
    selfButton: Button = null;

    @property(Node)
    focusNode: Node = null;

    useObserves() {
        return [
            this.editorArrow.subscribe(this.refresh.bind(this)),
            BindButton(this.selfButton).subscribe(this.selfButtonClicked.bind(this)),
            nc.subscribe('arrow_inspector_change', this.refreshFocus.bind(this)),
        ];
    }

    onDestroyView(): void {
    }

    refresh() {
        if (this.editorArrow.value != null) {
            this.arrowIdLabel.string = `${this.editorArrow.value.arrowId.value}#`;
            this.layerLabel.string = `L${this.editorArrow.value.layer.value}`;
            this.directionLabel.string = `D${this.editorArrow.value.direction}(${dirArrowTxt[this.editorArrow.value.direction]})`;
            this.colorLabel.string = `C${this.editorArrow.value.colorId}`;
            this.colorSprite.color = Colors[this.editorArrow.value.colorId];

            this.prevLabel.string = this.editorArrow.value.prev.value != null ? `P${this.editorArrow.value.prev.value}#` : `Pn/a`;
        }
        this.refreshFocus();
    }

    refreshFocus() {
        this.focusNode.active = this.editorStageView.arrowInspectorMap.has(this.editorArrow.value?.arrowId.value);
    }

    selfButtonClicked() {
        if (this.editorArrow.value != null) {
            this.editorStageView.tryOpenArrowInspector(this.editorArrow.value.arrowId.value);
        }
    }

}

